<template>
	<view class="card" @tap="gateTo" >
		<!-- 房屋转租 -->
		<view class="card-sublease">房屋转租</view>
		<!-- 消息 -->
		<view class="card-message"></view>
		<!-- 发帖 -->
		<view class="card-post"></view>
		<view class="card-info">
			<view class="card-info-img">
				<image src="@/static/houseSublease/img.png" mode="" style="width: 96rpx;height: 96rpx;"></image>
			</view>
			<view class="card-info-box">
				<text class="card-info-box-name">PM-liu</text>
				<text class="card-info-box-address">IP广东广州</text>
			</view>
		</view>
		<view class="card-information">
			<view class="card-information-line">
				<text class="card-information-line-label">房子租金：</text>
				<text class="card-information-line-value">800元/月</text>
			</view>
			<view class="card-information-line">
				<text class="card-information-line-label">转租户型：</text>
				<text class="card-information-line-value">一室一厅</text>
			</view>
			<view class="card-information-line">
				<text class="card-information-line-label">合同方式：</text>
				<text class="card-information-line-value">重签合同</text>
			</view>
		</view>
		<view class="card-phone">
			<text class="card-phone-tel"></text>
			<text class="card-phone-num">打电话</text>
		</view>
		<view class="card-images">
			<image  class="card-images-img" src="@/static/houseSublease/img2.png" mode=""></image>
			<image  class="card-images-img" src="@/static/houseSublease/img2.png" mode=""></image>
			<image  class="card-images-img" src="@/static/houseSublease/img2.png" mode=""></image>
			<image  class="card-images-img" src="@/static/houseSublease/img2.png" mode=""></image>
		</view>
		<view class="card-footer">
			<text class="card-footer-address"></text>
			<text class="card-footer-addressLabel">柯木郎背坪岚牌街31号-精装阳光大单间</text>
		</view>
		<view class="card-bottom">
			1093浏览，4分享，昨天13:37刷新
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
				default: () => {}
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			// 跳转详情
			gateTo(){
				uni.navigateTo({
					url:'/pages/houseSublease/details'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.card {
		padding: 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.01);
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		position: relative;
		&-sublease{
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			width: 108rpx;
			height: 40rpx;
			background: rgba(0,149,248,0.08);
			border-radius: 6rpx;
			border: 1rpx solid #0095F8;
			line-height: 40rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #0095F8;
		}
		&-info{
			height: 96rpx;
			display: flex;
			margin-bottom: 32rpx;
			&-img{
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 24rpx;
			}
			&-box{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				&-name{
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}
				&-address{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
		&-information{
			margin-bottom: 24rpx;
			&-line{
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				&-label{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #4F5963;
				}
				&-value{
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
				}
			}
			&-line:last-child{
				margin-bottom: 0;
			}
		}
		&-phone{
			margin-bottom: 24rpx;
			width: 638rpx;
			height: 104rpx;
			background: #E3F5FF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&-tel{
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 32rpx;
				height: 32rpx;
				margin-right: 24rpx;
				background-image: url('@/static/houseSublease/phone.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			&-num{
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #0095F8;
			}
		}
		&-images{
			display: flex;
			justify-content: space-between;
			height: 144rpx;
			margin-bottom: 32rpx;
			&-img{
				width: 144rpx;
				height: 144rpx;
				border-radius: 20rpx;
			}
		}
		&-footer{
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			&-address{
				background-image: url('@/static/houseSublease/address.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}
			&-addressLabel{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
			}
		}
		&-bottom{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
		&-message{
			position: absolute;
			bottom: 24rpx;
			right: 32rpx;
			width: 40rpx;
			height: 36rpx;
			background-image: url("@/static/houseSublease/message.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		&-post{
			position: absolute;
			top: 150rpx;
			right: 8rpx;
			width: 112rpx;
			height: 112rpx;
			background-image: url('@/static/houseSublease/post.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
</style>